<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browse</title>
<link rel="stylesheet" href="css/style.css" media="screen" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#refinements_button").click(function(){
		toogleMenu();
	});
	
	$(document).keypress(function(e){
		if(e.which == 114){
			toogleMenu();
		}
	});
	
	function toogleMenu(){
		var $menu = $("#menu");
		if($menu.css("display")=="none"){
			showMenu();
		}else{
			hideMenu();
		}
	}
	
	function showMenu(){
		$("#menu").show("slow");
		$("#item-container").removeClass("no-menu");
		$("#items").removeClass("lst-photo").addClass("lst-photo-3cols");
	}
	
	function hideMenu(){
		$("#menu").hide("slow");
		$("#item-container").addClass("no-menu");
		$("#items").removeClass("lst-photo-3cols").addClass("lst-photo");
	}
});
</script>
</head>

<body>
<div class="wrapper">
	<header>
    	<div class="topheader">
        	<section><h3><a href="javascript:;">Made by people</a></h3></section>
            <aside>
                <p class="navtop">
                	<a href="javascript:;">login</a>
                    <a href="javascript:;">cart(0)</a>
                    <a href="javascript:;" class="arrow1">more</a>
                </p>
            </aside>
        </div>
        <nav class="navmain">			
        	<!--<h3><a href="javascript:;" class="active">Create</a><br /><a href="javascript:;">Shop</a></h3>-->						
            <ul class="mainmenu">
            	<li><a href="javascript:;" class="active">BROWSE</a>
					<ul class="browse-submenu">
                    	<li><a href="javascript:;">MY HOME</a></li>
                        <li><a href="javascript:;">MY DESIGNS</a></li>
                        <li><a href="javascript:;">LIKE | LIKED </a></li>
                        <li><a href="javascript:;">VOTES | VOTED  </a></li>
                        <li><a href="javascript:;">FRIENDS</a></li>
                        <li><a href="javascript:;">FRIEND REQUESTS (2) </a></li>
                        <li><a href="javascript:;">VIEWS</a></li>
                        <li><a href="javascript:;">COMMENTS</a></li>
                        <li><a href="javascript:;">MY PROFILE </a></li>
                        <li><a href="javascript:;">MY SETTINGS</a></li>
                        <li><a href="javascript:;">CHANGE EMAIL</a></li>
                    </ul>
				</li>
                <li><a href="javascript:;">DESIGN</a></li>
                <li><a href="javascript:;">BRAND IT</a></li>
                <li><a href="javascript:;">MY STUFF</a></li>
                <li><a href="javascript:;">BLOG</a></li>
            </ul>
        </nav>
        
    </header>
    <div class="maincontent">
    	<div class="type-view">
            <p><img src="images/arrow4.jpg" id="refinements_button"/>r - refinements, d - down, f - up, b - bottom, t - top</p>
        </div>
    	<aside id="menu" style="display:none;">
        	<a href="javascript:;" class="ico-close"><img src="images/ico-close.jpg" /></a>
        	<div class="navtopmenu">
            	<a href="javascript:;">MY VOTES</a>
				<a href="javascript:;">MY LIKES</a>
            </div>
        	<form class="frmsearch"><input type="text" /><input type="button" /></form>
            <div class="refinements">
            	<h3>Refinements</h3><h4>clear all</h4>
                <div><p>Category:</p><span><p>Skirts</p><a href="javascript:;">x</a></span></div>
                <div><p>Designer:</p><span><p>Name</p><a href="javascript:;">x</a></span></div>
                <div>
                	<p>Color:</p>
                	<span>
                    	<a class="color" style="background:yellow" href="javascript:;"></a>
                        <a href="javascript:;"><b>x</b></a>
                    </span>
                    <span>
                    	<a class="color" style="background:red" href="javascript:;"></a>
                        <a href="javascript:;"><b>x</b></a>
                    </span>
                </div>
            </div>
            <ul class="leftmenu">
            	<li class="leftmenu">
            		<h4>CATEGORY<a href="javascript:;" class="ico-expand"></a></h4>
            	</li>
            	<li>
                    <h4>women<a href="javascript:;" class="ico-collapse"></a></h4>
                    <ol>
                        <li><a href="javascript:;">All</a></li>                    
                        <li><a href="javascript:;">Dresses</a></li>
                        <li><a href="javascript:;">Skirts</a></li>
                        <li><a href="javascript:;">Tops</a></li>
                        <li><a href="javascript:;">Outerwear</a></li>
                        <li><a href="javascript:;">Jeans</a></li>
                        <li><a href="javascript:;">Pants</a></li>
                        <li><a href="javascript:;">Shots</a></li>
                        <li><a href="javascript:;">Jumpsuit</a></li>
                    </ol>
                </li>
                <li class="leftmenu">
            		<h4>Men<a href="javascript:;" class="ico-expand"></a></h4>
            	</li>
                <li class="leftmenu">
            		<h4>both<a href="javascript:;" class="ico-expand"></a></h4>
            	</li>
                <li class="leftmenu">
            		<h4 style="background:none">FILTER BY<a href="javascript:;" class="ico-expand"></a></h4>
                    <ol>                  
                        <li><a href="javascript:;">ALL</a></li>
                        <li><a href="javascript:;">New</a></li>
                        <li><a href="javascript:;">Most Votes</a></li>
                        <li><a href="javascript:;">Top List</a></li>
                        <li><a href="javascript:;">Most commented</a></li>
                        <li><a href="javascript:;">Staff picks</a></li>
                        <li><a href="javascript:;">comments</a></li>
                    </ol>
            	</li>
            </ul>
            <div class="color-grid">
            	<h4>Color</h4>
            	<div>
                	<a href="javasacript:;" style="background:#000;"></a>
                    <a href="javasacript:;" style="background:#fe0000;"></a>
                    <a href="javasacript:;" style="background:#ffff01;"></a>
                    <a href="javasacript:;" style="background:#00ff01;"></a>
                    <a href="javasacript:;" style="background:#0000fe;"></a>
                    <a href="javasacript:;" style="background:#ff00fe;"></a>
                    <a href="javasacript:;" style="background:#c2272d;"></a>
                    <a href="javasacript:;" style="background:#ee1c25;"></a>
                    <a href="javasacript:;" style="background:#f6931b;"></a>
                    <a href="javasacript:;" style="background:#3ab54a;"></a>
                    <a href="javasacript:;" style="background:#28abe1;"></a>
                    <a href="javasacript:;" style="background:#91288d;"></a>
                    <a href="javasacript:;" style="background:#d21559;"></a>
                    <a href="javasacript:;" style="background:#b3b3b3;"></a>
                    <a href="javasacript:;" style="background:#524741;"></a>
                    <a href="javasacript:;" style="background:#a67c52;"></a>
                    <a href="javasacript:;" style="background:#764c24;"></a>
                    <a href="javasacript:;" style="background:#41210c;"></a>
                    <a href="javasacript:;" style="background:#5e3811;"></a>
                    <a href="javasacript:;" style="background:#808080;"></a>
                    <a href="javasacript:;" style="background:#b3b3b3;"></a>
                    <a href="javasacript:;" style="background:#28abe1;"></a>
                    <a href="javasacript:;" style="background:#181161;"></a>
                    <a href="javasacript:;" style="background:#181161;"></a>
                </div>                
            </div>
            <div class="leftbox">
            	<h4>city</h4><h5>homtown</h5>
                <input type="text" />
                <div>
                	
                	<p>New York (10)</p> 
                    <p>NY  USA  (10)</p>
                    <p>Paris France (50)</p> 
                    <p>Bangkok Thailnd (66)</p>
                </div>
            </div>
            <div class="leftbox">
            	<h4>people</h4>
                <h5><a href="javascript:;">top</a><a href="javascript:;">new</a><a href="javascript:;">random</a><a href="javascript:;">friends</a></h5>
                <input type="text" />
                <ul>
                	<li>
                    	<a class="avatar" href="javascript:;"></a>
                        <p><a href="javascript:;">Sirinya Jan,</a>  Bangkok [status, mood]</p>
                    </li>
                    <li>
                    	<a class="avatar" href="javascript:;"></a>
                        <p><a href="javascript:;">Sirinya Jan,</a>  Bangkok [status, mood]</p>
                    </li>
                    <li>
                    	<a class="avatar" href="javascript:;"></a>
                        <p><a href="javascript:;">Sirinya Jan,</a>  Bangkok [status, mood]</p>
                    </li>
                    <li>
                    	<a class="avatar" href="javascript:;"></a>
                        <p><a href="javascript:;">Sirinya Jan,</a>  Bangkok [status, mood]</p>
                    </li>
                    <li>
                    	<a class="avatar" href="javascript:;"></a>
                        <p><a href="javascript:;">Sirinya Jan,</a>  Bangkok [status, mood]</p>
                    </li>
                </ul>
            </div>
            <div class="leftbox">
            	<h4>Search people</h4>
            </div>
        </aside>
    	<section id="right-part-3cols">
			<div id="item-container" class="no-menu">
				<ul id="items" class="lst-photo">
					<li>
                    	<div class="func">
                            <a href="javascript:;" class="ico-comment">Comment</a>
                            <a href="javascript:;" class="ico-share">Share</a>
                            <a href="javascript:;" class="ico-like">Like</a>
                        </div>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"><img src="images/img2.jpg" /></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"><img src="images/img1.jpg" /></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"><img src="images/img3.jpg" /></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"><img src="images/img2.jpg" /></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
					<li>
						<a class="thumb" href="javascript:;"></a>
						<div class="user-info">
							<a class="ava-user" href="javascript:;"></a>
							<div>
								<h4>user name</h4>
								<h4>from San Francisco</h4>
							</div>
						</div>
						<p class="nav-user">
							<a href="javascript:;">113 Likes</a>
							<a href="javascript:;">7 Comments</a>
							<a href="javascript:;">161 Votes</a>
						</p>
					</li>
				</ul>
			</div>
        </section>
    </div>
    <footer>
    	<nav>
        	<div class="follow">
            	<h4>Follow us</h4>
                <span>for fashion freshness Twitter<br /><br />BECOME A FAN Facebook </span>
            </div>
            <div class="about">
            	<h4>About</h4>
                <span>Made By People is not a cottage industry for sewing circles.  <br />It is
a high tech solution for fashion democracy.</span>
            </div>
            <ul>
            	<li>FOR DESIGNERS:</li>
                <li><a href="javascript:;">Create a Look</a></li>
                <li><a href="javascript:;">Browse a Look</a></li>
                <li><a href="javascript:;">Broswe Sketches</a></li>
                <li><a href="javascript:;">Browse Samples</a></li>
                <li><a href="javascript:;">Discover Designers</a></li>
            </ul>
            <ul>
            	<li>FOR SHOPPERS:</li>
                <li><a href="javascript:;">Whats New</a></li>
                <li><a href="javascript:;">Vote</a></li>
                <li><a href="javascript:;">Prebuy</a></li>
                <li><a href="javascript:;">Goto to Shop</a></li>
            </ul>
            <ul>
            	<li>MADE BY PEOPLE:</li>
                <li><a href="javascript:;">About</a></li>
                <li><a href="javascript:;">Learn</a></li>
                <li><a href="javascript:;">Contact</a></li>
                <li><a href="javascript:;">Press Access</a></li>
                <li><a href="javascript:;">Wholesale </a></li>
                <li><a href="javascript:;">Team</a></li>
                <li><a href="javascript:;">Privacy Policy</a></li>
                <li><a href="javascript:;">Terms of Service</a></li>
                <li><a href="javascript:;">Careers</a></li>
                <li><a href="javascript:;">FAQ</a></li>
            </ul>
        </nav>
        <div class="copyright">
        	<h4>© 2012 Made By People all rights reservedr</h4>
        </div>
    </footer>
</div>
</body>
</html>
